<template>
  <div>
    <div class="swi">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,index) in imgs" :key="index">
          <img :src="item.src" alt>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="shopcar">
      <div class="goodst">{{goods.title}}</div>
      <p class="goodsp">
        <span>市场价：</span>
        <span class="mp">￥{{goods.market_price}}</span>
        <span>销售价：</span>
        <span class="sp">￥{{goods.sell_price}}</span>
      </p>
      <p class="count">
        <span>购买数量</span>
        <van-stepper v-model="comvalue" integer/>
      </p>
      <div class="goodsbuy">
        <van-button type="info" text="立即购买"/>
        <van-button @click="pushshopcar(goods.id)" type="danger" text="加入购物车"/>
      </div>
    </div>
    <div class="info">
      <div class="infom">商品参数</div>
      <div class="infodetalis">
        <p>商品货号：{{goods.goods_no}}</p>
        <p>库存情况：{{goods.stock_quantity}}</p>
        <p>上架时间：{{goods.add_time}}</p>
      </div>
      <div class="infobttn">
        <van-button block plain hairline @click="presentgoods(goods.id)" type="info">图文介绍</van-button>
        <van-button block plain hairline type="danger" @click="gocomment(goods.id)">商品评论</van-button>
      </div>
    </div>
  </div>
</template>
           
<script>
import { mapMutations } from "vuex";
import { shopcarget, shopinfoget, shopimg } from "@/api";
export default {
  data() {
    return {
      goods: {
        id: 0,
        title: "",
        goods_no: "",
        add_time: "",
        stock_quantity: 0,
        market_price: 0,
        sell_price: 9999
      },
      imgs: [],
      comvalue: 1
    };
  },
  methods: {
    ...mapMutations(["addgoods"]),
    async getinfo(id) {
      var res = await shopinfoget(id);
      this.goods = res.data.message[0];
      console.log(this.goods, 1000000);
    },
    async getimg(id) {
      var res = await shopimg(id);
      this.imgs = res.data.message;
    },
    pushshopcar(id) {
      console.log(id, 7);

      this.$toast.success("已加入购物车");
      var obj = {
        id: id,
        cou: this.comvalue
      };
      this.addgoods(obj);
    },
    presentgoods(id) {
      this.$router.push({ path: `/presentgoods/${id}` });
    },
    gocomment(id) {
      this.$router.push({ path: `/comment/${id}` });
    }
  },
  created() {
    this.getinfo(this.$route.params.id);
    this.getimg(this.$route.params.id);
  },
  computed: {}
};
</script>
<style scoped lang=less>
.swi {
  height: 235px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  margin: 10px 20px;
  .my-swipe .van-swipe-item {
    width: 200px;
    height: 200px;
    background-color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;

    img {
      width: 200px;
      height: 200px;
      margin: 20px;
    }
  }
}
.shopcar {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 20px;
  padding: 20px;
  background-color: #fff;
  text-align: left;
  .goodst {
    border-bottom: 1px solid #ccc;
  }
  .goodsp {
    margin: 15px 10px;
    font-size: 14px;
    color: rgb(143, 143, 162);
    .mp {
      text-decoration: line-through;
      margin: 0 10px;
    }
    .sp {
      color: red;
      margin: 0 10px;
    }
  }
  .count {
    margin: 15px 10px;
    font-size: 14px;
    color: rgb(143, 143, 162);
    display: flex;
    align-items: center;
    .van-stepper {
      padding: 0 15px;
    }
  }
  .goodsbuy {
    .van-button {
      height: 35px;
      line-height: 35px;
    }
  }
  .van-stepper {
    display: inline-block;
  }
  .van-button {
    margin-right: 15px;
  }
}
.info {
  background-color: #fff;
  margin: 10px 20px;
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 100px;
  text-align: left;
  .infom {
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;
  }
  .infodetalis {
    font-size: 14px;
    padding: 13px 10px;
    color: rgb(143, 143, 162);
    border-bottom: 1px solid #ccc;
    p {
      height: 18px;
    }
  }
  .infobttn {
    padding-top: 15px;
    .van-button {
      margin: 8px 0;
    }
  }
}
</style>